$default-size: 270px;

// -- mixins
@mixin size($width, $height) {
    height: $height;
    width: $width;
}
  
  @mixin draw-progress($progress, $color) {
    .pie {
      .half-circle {
        border-color: $color;
      }
  
      .left-side {
        transform: rotate($progress * 3.6deg);
      }
  
      @if $progress <= 50 {
        .right-side {
          display: none;
        }
      } @else {
        clip: rect(auto, auto, auto, auto);
  
        .right-side {
          transform: rotate(180deg);
        }
      }
    }
  }
  
  .pie-wrapper {
    @include size($default-size, $default-size);
    margin: 15px;
    position: relative;
    
    &:nth-child(3n + 1) {
      clear: both;
    }
  
    .pie {
      @include size(100%, 100%);
      clip: rect(0, $default-size, $default-size, $default-size / 2);
      left: 0;
      position: absolute;
      top: 0;
  
      .half-circle {
        @include size(100%, 100%);
        border: 16px solid #E6AD74;
        border-radius: 50%;
        clip: rect(0, $default-size / 2, $default-size, 0);
        left: 0;
        position: absolute;
        top: 0;
      }
    }
  
    .label {
        width: 270px;
        height: 270px;
        background: #fff;
        border-radius: 50%;
        color: #ecf0f1;
        text-align: center;
        border: 16px solid #FFF1E6;
    }
  
    @for $i from 1 through 100 {
        &.progress-#{$i} {
          @include draw-progress($i, #E6AD74);
        }
      }
  }
  